import { getCount, getName } from '@/api/utils';
import React, { forwardRef, memo } from 'react';
import { SongItem, SongList } from './style';
import {
  changePlayListAction,
  changeCurrentIndexAction,
  changeSequecePlayListAction,
} from '@/application/Player/store/actionCreators';
import { useDispatch } from 'react-redux';
export default memo(
  forwardRef(function SongsList(props, refs) {
    const { collectCount, showCollect, songs, showBackground } = props;
    const { musicAnimation } = props;
    const totalCount = songs.length;
    const dispatch = useDispatch();
    const seletItem = (e, index) => {
      // songs 所有的歌曲
      console.log(songs,  index)
      changePlayListDispatch(songs)
      changeSequecePlayListDispatch(songs);
      changeCurrentIndexDispatch(index);
      musicAnimation(e.nativeEvent.clientX, e.nativeEvent.clientY);
    };
    const changePlayListDispatch = (data) => {
      dispatch(changePlayListAction(data));
    };
    const changeCurrentIndexDispatch = (data) => {
      dispatch(changeCurrentIndexAction(data));
    };
    const changeSequecePlayListDispatch = (data) => [
      dispatch(changeSequecePlayListAction(data)),
    ];
    const songList = (list) => {
      const res = [];
      for (let i = 0; i < list.length; i++) {
        const item = list[i];
        res.push(
          <li key={item.id} onClick={(e) => seletItem(e, i)}>
            <span className="index">{i + 1}</span>
            <div className="info">
              <span>{item.name}</span>
              <span>
                {item.ar ? getName(item.ar) : getName(item.artists)} -{' '}
                {item.al ? item.al.name : item.album.name}
              </span>
            </div>
          </li>
        );
      }
      return res;
    };
    const collect = (count) => {
      return (
        <div className="add_list">
          <i className="iconfont">&#xe62d;</i>
          <span>收藏 {getCount(count)}</span>
        </div>
      );
    };
    return (
      <SongList ref={refs} showBackground={showBackground}>
        <div className="first_line">
          <div className="play_all" onClick={(e) => seletItem(e, 0)}>
            <i className="iconfont">&#xe6e3;</i>
            <span>
              播放全部 <span className="sum">(共 {totalCount} 首)</span>
            </span>
          </div>
          {showCollect ? collect(collectCount) : null}
        </div>
        <SongItem>{songList(songs)}</SongItem>
      </SongList>
    );
  })
);
